<template>
	<div class="view-contain">
		<headers @back-click="back()" v-bind:headers="headers"></headers>
		<scroll @pullingDown="pullDownRefresh" @pullingUp="pullUpLoad" ref="person" style="margin-top:-1px">
			<div class="content">
				<div class="logo">
					<div class="img"></div>
				</div>
				<div class="guide-form">
		            <div class="pwd">
		                <input class="telInput"  placeholder="请输入您的密码" v-model="pwd">
		                <div class="eye">
		                </div>
		            </div>
		        </div>
		        <div class="confirm">
		            <button class="btn" :class="{'active': !verify.isNull(pwd)}" @click="confirm()">确认</button>
		            <p class="txt">
		                <span>温馨提示：</span>
		                为了您的账号安全，请设置密码，完成后您就可以使用手机号+密码登录。
		            </p>
		        </div>
	        </div>
	    </scroll>
	</div>
</template>
<style lang="less" scoped>
	.view-contain{
		position:absolute;
		width:100%;
		height:100%;
		left:0;
		top:0;
		background:#fff;
		.content {
			position: relative;
			top: 44px;
			left: 0;
			background: #fff;
			& .logo {
				padding: 56px 0 48px;
				& .img {
					background: url("../../assets/img/comm/logo.png") no-repeat;
					background-size: 100% 100%;
					width: 88px;
					height: 88px;
					margin: 0 auto;
				}
			}
			& .guide-form {
			    position: relative;
			    width: 8.08107rem;
			    margin: 0 auto;
			    overflow: hidden;
			 	& .pwd {
				    margin-top: 17px;
				    padding-right: 1.146667rem;
				    position: relative;
				    padding-left: 1.146667rem;
				    border: 1px solid #DADADA;
				    border-radius: .13227rem;
				    overflow: hidden;
				    & input {
				    	box-sizing: border-box;
					    width: 100%;
					    padding: 6px 0;
					    height: 38px;
					    line-height: 16px;
					    border: none;
					}
					&:before {
						position: absolute;
					    content: '';
					    width: 24px;
					    height: 24px;
					    top: 6px;
					    left: 10px;
					    background: url("../../assets/img/comm/login-icons.png") no-repeat;
					    background-position: -53px -52px;
					}
					& .eye {
						position: absolute;
						top: 6px;
						left: auto;
					    right: 10px;
					    width: 24px;
						height: 24px;
					    background-position: -9px -52px;
					    &:before {
					    	width: 24px;
						    height: 24px;
						    content: '';
						    background: url("../../assets/img/comm/login-icons.png") no-repeat;
						    background-position: -9px -52px;
					    }
					}
				}
			}
			& .confirm {
				position: relative;
			    width: 303px;
			    margin: 0 auto;
			    overflow: hidden;
			}
			& .btn {
			    margin-top: 36px;
			    width: 100%;
			    border-radius: 5px;
			    height: 39px;
			    line-height: 39px;
			    background-color: #e0e0e0;
			    font-size: 16px;
			    color: #fff;
			    border: none;
			    text-align: center;
			    &.active {
				    background-color: #4C5B72;
				}
			}
			& .txt{
			    margin-top: 16px;
			    color: #999;
			    font-size: 12px;
	    		line-height: 16px;
	    		text-align: left;
			}
		}
	}
</style>
<script>
	import verify from '@/utils/verify.js';
	import apiService from "@/api/homepage.js";
	import crypto from 'crypto';
	import Toast from '@/components/toast.js';
	export default {
		components: {
        },
        data() {
        	return {
	        	headers:{
	                title:'设置密码',
	                skip:'',
	            },
	            pwd: "",
	            verify: verify
	        }
        },
        methods: {
            back() {
                this.$router.go(-1)
            },
            confirm() {
            	var _this = this;
            	var md5=crypto.createHash('md5');
        		md5.update(this.pwd);
        		var pw = md5.digest('hex');
        		const params = {
	                "password": pw
	            }
            	apiService.pwdAdd(params).then(resp => {
            		if(resp.code == 200) {
            			_this.$router.push({path:'/setSuccess'});
            		} else{
            			Toast(resp.message);
            		}
            	})
            },
            pullDownRefresh() {
            	this.$refs.person.forceUpdate();
            	return;
            },
            pullUpLoad(){
            	this.$refs.person.forceUpdate();
            	return;
            }
        },
	}
</script>